<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta name="author" content="金西振" />
		<title></title>
		<style></style>
	</head>
	<body>

    <ul>
      <li><a href="">选项1</a></li>
      <li><a href="">选项2</a></li>
      <li><a href="">选项3</a></li>
    </ul>
		<button class="btn">按钮1</button>
		<button class="btn">按钮2</button>
		<button class="btn">按钮3</button>
		<button class="btn">按钮4</button>
		<button class="btn">按钮5</button>
		<button class="btn">按钮6</button>
		<script>
			// 点击不同的按钮，分别显示为： 红橙黄绿青蓝
			var colors = ['red', 'green', 'yellow', 'orange', 'cyan', 'blue'];
			var btns = document.querySelectorAll('.btn');

      // 区分点击的是哪一个按钮: 使用this或者ev.target 
      // 需要获取到点击不同的按钮有一个索引值：第一个按钮是0，第二个按钮是1，第三个按钮是2 ....
      for(var i = 0; i < btns.length; i++){
        var btn = btns[i];
        btn.index = i;
        btn.onclick = function(ev){
          console.log('点击按钮', ev.target);
          console.log('点击按钮', this);
          this.style.color = colors[this.index];
        }
      }


      // for(var i = 0; i < btns.length; i++){
      //   var btn = btns[i];
      //   var fn = function(ev){
      //     console.log('点击按钮', ev.target);
      //     console.log('点击按钮', this);
      //     // this.style.color = 
      //   }

      //   btn.onclick = fn;
      // }
		</script>
	</body>
</html>
